/* Tailwind CSS 基础指令 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 全局样式 */
@layer base {
  * {
    @apply m-0 p-0 box-border;
  }

  html,
  body {
    @apply h-full;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
      sans-serif;
  }

  #app {
    @apply h-full;
  }
}

/* 自定义组件样式 */
@layer components {
  /* 粉色渐变背景 */
  .bg-pink-gradient {
    @apply bg-gradient-to-br from-pink-100 to-pink-200;
  }

  /* 磨砂玻璃效果 */
  .glass-effect {
    @apply bg-white/80 backdrop-blur-lg;
  }

  /* 粉色按钮 */
  .btn-pink {
    @apply bg-gradient-to-r from-pink-400 to-pink-500 text-white font-medium py-3 px-6 rounded-2xl shadow-pink hover:shadow-pink-md transition-all duration-300 hover:scale-105;
  }

  /* 粉色输入框 */
  .input-pink {
    @apply border-2 border-pink-200 rounded-xl px-4 py-3 focus:border-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-200 transition-all duration-300;
  }
}
